<template>
    <div class="pos_detail">
        <Card :bordered="false" class="box clearfix">
            <p slot="title">出厂信息</p>
            <Form ref="formCustom"  :label-width="100">
                <FormItem label="客户名称" class="list_2">
                    {{release?release.customerName:''}}
                </FormItem>
                <FormItem label="出库单号" class="list">
                    {{release?release.billNo:''}}
                </FormItem>
                    <FormItem label="出厂日期" class="list">
                    {{release?release.deliveryDate:''}}
                </FormItem>
                    <FormItem label="是否在保" class="list">
                    {{release?(release.isUnderWarranty?'是':'否'):''}}
                </FormItem>
                    <FormItem label="保修截止日期" class="list">
                    {{release?release.warrantyDate:''}}
                </FormItem>
            </Form>
             <Spin size="large" fix v-if="spinShow"></Spin>
        </Card>
        <Card :bordered="false" class="box clearfix">
            <p slot="title">配置信息</p>
            <Form ref="formCustom"  :label-width="100">
                <FormItem label="物料名称" class="list">
                    {{configuration?configuration.material_name:''}}
                </FormItem>
                <FormItem label="物料代码" class="list">
                    {{configuration?configuration.material_code:''}}
                </FormItem>
                <FormItem label="产品大类" class="list">
                    {{configuration?configuration.classific:''}}
                </FormItem>
                <FormItem label="通讯方式" class="list">
                    {{configuration?configuration.communication:''}}
                </FormItem>
                <FormItem label="机型" class="list">
                    {{configuration?configuration.series:''}}
                </FormItem>
                <FormItem label="当前版本" class="list">
                    {{configuration?configuration.version:''}}
                </FormItem>
                <FormItem label="配置描述" class="list">
                    {{configuration?configuration.configuration:''}}
                </FormItem>
            </Form>
             <Spin size="large" fix v-if="spinShow"></Spin>
        </Card>
        <Card :bordered="false" class="box clearfix">
            <p slot="title">程序信息</p>
            <Form ref="formCustom"  :label-width="100">
                <FormItem label="机身号（SN）" class="list">
                    {{sn?sn:''}}
                </FormItem>
                    <FormItem label="程序类型" class="list">
                    {{program?program.appType:''}}
                </FormItem>
                    <FormItem label="应用程序" class="list">
                     {{program?program.programName:''}}
                </FormItem>
                    <FormItem label="内核版本" class="list">
                     {{program?program.kernelVersion:''}}
                </FormItem>
                    <FormItem label="最新版本" class="list">
                     {{program?program.program:''}}
                </FormItem>
            </Form>
             <Spin size="large" fix v-if="spinShow"></Spin>
        </Card>
    </div>
</template>
<script>
export default {
    props:{
        snInfo:{
            type:Object
            ,default(){
                return {};
            }
        }
        ,spinShow:{
            type:Boolean
            ,default:false
        }
    }
    ,data(){
        return{
            release:{}
            ,program:{}
            ,configuration:{}
            ,sn:''
        }
    }
    ,watch:{
        snInfo(newVal){
            let t = this;
            let oData = newVal.ext;
            if(oData&&Object.keys(oData).length){
                t.release = oData.release;
                t.program = oData.program;
                t.configuration = oData.configuration;
                t.sn = oData.sn;
            }
        }
    }
    ,created(){
        let t = this;
    }
}
</script>
<style lang="less">
.pos_detail{
    padding: 0 10px;
    .box{
        margin: 0 10px 20px 10px;
    }
    .list,.list_2{
        float: left;
    }
    .ivu-form-item-label{
        font-weight: bold;
    }
   @media screen and (max-width: 600px) { 
    .list{
        width: 100%;
    }               
   }
   @media screen  and (min-width: 600px) and (max-width: 1200px) { 
    .list{
        width: 50%;
    }     
    .list_2{
        width: 100%;
    }
   }
   @media screen and (min-width:1200px) and (max-width:1800px) {
    .list{
        width: 30%;
    }      
    .list_2{
        width: 60%;
    }
   }
   @media screen and (min-width:1800px) {
    .list{
        width: 25%;
    }      
    .list_2{
        width: 50%;
    }
   }
}
</style>